<template>
  <div>
    <router-view></router-view>

    <div class="app">
      <router-link to="/one" active-class='act' class="item" tag='div'>
        <i class="icon iconfont icon-changyonglogo40"></i>
        <span>外卖</span>
      </router-link>
      <router-link to="/two" active-class='act' class="item" tag='div'>
        <i class="icon iconfont icon-faxian"></i>
        <span>发现</span>
      </router-link>
      <router-link to="/three" active-class='act' class="item" tag='div'>
        <i class="icon iconfont icon-icon"></i>
        <span>订单</span>
      </router-link>
      <router-link to="/four" active-class='act' class="item" tag='div'>
        <i class="icon iconfont icon-wode"></i>
        <span>我的</span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="less">
@import '../../static/less/var.less';
.app{
      position: fixed;
      bottom: 0;
      left: 0;
      height:@base*100rem;
      width: 100%;
      display: flex;
      background: #fff;
      border-top: 1px solid @bc1;
      .item{
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
          color:@fc1;
        // padding-top:@base*20rem;
        i{
          font-size: @base*42rem;
        }
        span{
          font-size: @base*24rem;

        }
        &.act{
            color: @mc;
        }
      }
    }
</style>
